<template>
    <flexBox justify-content="flex-start" style="width: 100%;" gap="8px">
        <span v-for="(item, index) in dt">
            <cButton size="small" v-if="item.type == 'button'" :leftIcon="item.leftIcon" :rightIcon="item.rightIcon"
                :disabled="item.disabled" :round="item.style ? item.style.round : undefined"
                :plain="item.style ? item.style.plain : undefined" :color="item.style ? item.style.type : undefined"
                @click="() => {
                    try {
                        item.callBack()
                    } catch (error) {
                        console.log(error)
                    }
                }">
                {{ item.title }}</cButton>
            <cButton style="opacity: 0;" size="small" v-if="item.type == 'opacityZeroButton'" :leftIcon="item.leftIcon"
                :rightIcon="item.rightIcon" :disabled="item.disabled" :round="item.style ? item.style.round : undefined"
                :plain="item.style ? item.style.plain : undefined" :color="item.style ? item.style.type : undefined"
                @click="() => {
                    try {
                        item.callBack()
                    } catch (error) {
                        console.log(error)
                    }
                }">
                {{ item.title }}</cButton>
            <flexBox v-if="item.type == 'input'" style="background-color: rgb(230,230,230);border-radius: 5px;">
                <el-input @keydown="(e) => {
                    if (e.code != 'Enter' && e.code != 'NumpadEnter') return
                    try {
                        item.okCallBack(item.default)
                    } catch (error) {
                        console.log(error)
                    }
                }" :disabled="item.disabled" v-model="item.default" :placeholder="item.placeholder"
                    style="width: 200px;border-radius: 5px 0 0 5px ;border: 0;" :style="item.style" @input="(e) => {
                        try {
                            item.inputCallBack(e)
                        } catch (error) {
                            console.log(error)
                        }
                    }" size="small"></el-input>
                <el-button :disabled="item.disabled" @click="() => {
                    try {
                        item.okCallBack(item.default)
                    } catch (error) {
                        console.log(error)
                    }
                }" size="small" style="border-radius: 0 5px 5px 0;width: 40px;padding: 0 3px;">
                    <cIcon :name="item.icon"></cIcon>
                </el-button>
            </flexBox>

            <el-select @change="() => {
                try {
                    item.callBack(item.default)
                } catch (error) {
                    console.log(error)
                }
            }" v-if="item.type == 'select'" :disabled="item.disabled" v-model="item.default" :placeholder="item.placeholder"
                size="small" style="width: 200px" :style="item.style">
                <el-option v-for="subItem in item.options" :key="subItem" :label="subItem" :value="subItem" />
            </el-select>

            <el-select filterable @change="() => {
                try {
                    item.callBack(item.default)
                } catch (error) {
                    console.log(error)
                }
            }" v-if="item.type == 'select2'" :disabled="item.disabled" v-model="item.default" :placeholder="item.placeholder"
                size="small" style="width: 200px" :style="item.style">
                <el-option v-for="subItem in item.options" :key="subItem.value" :label="subItem.title" :value="subItem.value" />
            </el-select>
            <el-select filterable @change="() => {
                try {
                    item.callBack(item.default)
                } catch (error) {
                    console.log(error)
                }
            }" v-if="item.type == 'groupSelect'" :disabled="item.disabled" v-model="item.default"
                :placeholder="item.placeholder" size="small" style="width: 200px" :style="item.style">
                <el-option-group v-for="(op1, opi1) in item.options" :key="op1.title" :label="op1.title">
                    <el-option v-for="(op2, opi2) in op1.children" :key="op2.title" :label="op2.title" :value="op2" />
                </el-option-group>
            </el-select>

            <el-link @click="() => {
                try {
                    item.callBack()
                } catch (error) {
                    console.log(error)
                }
            }" v-if="item.type == 'link'" size="small" :disabled="item.disabled" :type="item.style.type">{{ item.title
            }}</el-link>
            <span v-if="item.type == 'label'" :style="item.style">{{ item.title }}</span>
            <el-button-group v-if="item.type == 'buttonGroup'">
                <cButton v-for="(subItem, index2) in item.children" size="small" :leftIcon="subItem.leftIcon"
                    :rightIcon="subItem.rightIcon" :disabled="subItem.disabled"
                    :round="subItem.style ? subItem.style.round : undefined"
                    :plain="subItem.style ? subItem.style.plain : undefined"
                    :color="subItem.style ? subItem.style.type : undefined" @click="() => {
                        try {
                            subItem.callBack()
                        } catch (error) {
                            console.log(error)
                        }
                    }">
                    {{ item.title }}</cButton>
            </el-button-group>
        </span>
    </flexBox>
</template>

<script setup>
import { ref, reactive, defineProps, computed, watch, onMounted, onBeforeUnmount } from 'vue';
import flexBox from './flexBox.vue';
import cButton from './cButton.vue';
import cIcon from './cIcon.vue';
import tool from '../modules/tool'

const props = defineProps({
    data: {
        type: Object,
        default: []
    }
})

const dt = ref([])

watch(() => props.data, async (to, from) => {
    // if (from.length) {
    //     dt.value = [{
    //         type: 'opacityZeroButton',
    //         style: {

    //         }
    //     }]
    // } else {
    //     dt.value = []
    // }
    // await tool.wait(0.005)
    dt.value = props.data
}, {
    deep: true
})

onMounted(async () => {
    dt.value = props.data
})
</script>

<style scoped></style>